<!DOCTYPE html>
<html lang="en" class="bg-white">
<head>
    <title>主题</title>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${contextPath}/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="${contextPath}/plugins/module/admin.css" media="all"/>
    <style>
        .layui-card-body {
            padding: 0;
        }

        .theme-div {
            padding-left: 15px;
            padding-top: 20px;
            margin-bottom: 10px;
        }

        .btnTheme {
            display: inline-block;
            margin: 0 6px 15px 0;
            padding: 4px;
            border: 1px solid #fff;
        }

        .btnTheme img {
            width: 80px;
            height: 50px;
            border: 1px solid #f2f2f2;
            background: #F2F2F2;
            cursor: pointer;
        }

        .btnTheme:hover, .btnTheme.active {
            border-color: #5FB878;
        }

        .more-menu-item {
            display: block;
            height: 50px;
            line-height: 50px;
            font-size: 16px;
            border-bottom: 1px solid #e8e8e8;
            color: #333;
            padding: 0px 25px;
            font-style: normal;
        }

        .more-menu-item:first-child {
            border-top: 1px solid #e8e8e8;
        }

        .more-menu-item:hover {
            background: #F2F2F2;
            color: #333;
        }

        .more-menu-item .layui-icon {
            padding-right: 10px;
            font-size: 18px;
        }

        .more-menu-item:after {
            content: "\e602";
            font-family: layui-icon !important;
            position: absolute;
            right: 16px;
        }

        .more-menu-item.no-icon:after {
            content: "";
        }

        /** 设置表单样式 */
        .set-item-label {
            display: inline-block;
            height: 38px;
            line-height: 38px;
            padding-left: 20px;
            color: #333333;
        }

        .set-item-ctrl {
            display: inline-block;
            height: 38px;
            line-height: 38px;
        }

        .set-item-ctrl > * {
            margin: 0;
        }
    </style>
</head>
<body>

<div class="layui-card-header">设置主题</div>
<div class="layui-card-body">
    <!-- 主题列表 -->
    <div class="theme-div">
        <div class="btnTheme" theme="admin" title="黑白主题">
            <img src="${contextPath}/images/template/theme/img_theme_1.png">
        </div>
        <div class="btnTheme" theme="theme-black" title="黑色主题">
            <img src="${contextPath}/images/template/theme/img_theme_2.png">
        </div>
        <div class="btnTheme" theme="theme-cyan" title="藏青主题">
            <img src="${contextPath}/images/template/theme/img_theme_7.png">
        </div>
        <div class="btnTheme" theme="theme-blue-white" title="蓝白主题">
            <img src="${contextPath}/images/template/theme/img_theme_3.png">
        </div>
        <div class="btnTheme" theme="theme-blue" title="蓝黑主题">
            <img src="${contextPath}/images/template/theme/img_theme_4.png">
        </div>
        <div class="btnTheme" theme="theme-blue-side" title="蓝色主题">
            <img src="${contextPath}/images/template/theme/img_theme_5.png">
        </div>
        <div class="btnTheme" theme="theme-white" title="白色主题">
            <img src="${contextPath}/images/template/theme/img_theme_6.png" style="border-color: #cccccc;">
        </div>
        <div class="btnTheme" theme="theme-green-dark" title="暗绿主题">
            <img src="${contextPath}/images/template/theme/img_theme_9.png">
        </div>
        <div class="btnTheme" theme="theme-green" title="绿色主题">
            <img src="${contextPath}/images/template/theme/img_theme_8.png">
        </div>
        <div class="btnTheme" theme="theme-red-white" title="红白主题">
            <img src="${contextPath}/images/template/theme/img_theme_12.png">
        </div>
        <div class="btnTheme" theme="theme-red-dark" title="暗红主题">
            <img src="${contextPath}/images/template/theme/img_theme_11.png">
        </div>
        <div class="btnTheme" theme="theme-red" title="红色主题">
            <img src="${contextPath}/images/template/theme/img_theme_10.png">
        </div>
    </div>
</div>

<script type="text/javascript">
    var system = {
        contextPath: "${contextPath}"
    };
</script>
<script type="text/javascript" src="${contextPath}/plugins/layui/layui.js"></script>
<script src="${contextPath}/plugins/jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="${contextPath}/js/common/util.js"></script>
<script>
    layui.use(['layer', 'form', 'admin'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var admin = layui.admin;

        // 切换主题
        var mTheme = layui.data(admin.tableName).theme;
        $('.btnTheme[theme=' + (mTheme ? mTheme : admin.defaultTheme) + ']').addClass('active');
        $('.btnTheme').click(function () {
            $('.btnTheme').removeClass('active');
            $(this).addClass('active');
            admin.changeTheme($(this).attr('theme'));
        });

        form.render('checkbox');
    });
</script>
</body>
</html>